<template>
  <div>
    <ocean :use="template"></ocean>
  </div>
</template>
<script setup lang="tsx">
import { useTableTemplate } from '@/ocean';
import { GoodsAPI } from '@/app/api'
import { message } from '@/utils/naiveApi';

let props = defineProps<{
  category: any,
  onUpdate: Function,
}>()

let template = useTableTemplate('分类商品', {
  query: (data) => {
    GoodsAPI.queryAllGoodsForCate(data).then((res) => {
      template.table.setData(res.data)
      template.pagination.setCount(res.total)
    })
  }
})

template.form.item('商品名称', 'goodsName').input();

template.button('将选中商品添加到分类', { type: 'primary' }).click(() => {
  GoodsAPI.addGoodsToCate({ cateId: props.category.id, goodsId: template.table.selectedKeys as [] }).then((res) => {
    if(res.code){return message.warning(res.msg)}
    template.query();
    props.onUpdate();
  })
})

template.table.setAttrs({
  rowKey: row => row.id,
})
template.table.columnType('selection')
template.table.column('商品图片', 'cover').image();
template.table.column('商品名称', 'goodsName');
template.table.column('规格', 'goodsOption');
template.table.column('售价', 'sellPrice');
template.table.column('原价', 'originPrice');
template.table.column('创建时间', 'createTime');

template.form.setModel({
  cateId: props.category.id,
})

console.log(props.category.id)

template.query();

defineExpose({
  submit() {

  }
})

</script>